{% extends "risk/risk_base.html" %}
{% block title %}跟进{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-table.min.css') }}">


<style>
    .saw-info-head {
        font-size: 20px;
    }
    .saw-info-content{
        font-size: 20px;
    }
    .track-period {
        margin-top: 10px;
        background-color: #DFF0D8;
        height: 30px;
        line-height: 30px;
        font-size: 18px;

    }
    .track-period:hover {
        cursor: pointer;
    }

</style>



{% endblock %}
{% block page_content %}
<h1 class="page-header">跟进</h1>
<div class="modal fade" id="AddRecordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">添加记录</h4>
            </div>
            <div class="modal-body">
                <form action="{{ url_for('loan_track.add_track') }}" id="AddRecordForm" method="post">
                     <div class="form-group">
                            <input type="hidden" id="track_number" name="track_number" value="{{ ra.track_number }}">
                            <input type="hidden" id="flow_id" name="flow_id" value="{{ ra.flow_id }}">
                            <input type="hidden" id="track_name" name="track_name" value="{{ track_name }}">
                            <input name="xfrs" value="{{ xfrs }}" id="xfrs" type="hidden">
                            <label for="content">跟进内容</label>
                            <textarea name="content" class="form-control" rows="3" placeholder="请填写跟进内容" required=""></textarea>
                     </div>
                        <button type="submit" class="btn btn-default" >确定</button>
                    </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div class="modal fade" id="PayOffModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">确认还清?</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="pay_off_submit">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<div class="modal fade" id="MsgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="msg"></h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="id-button-comfirm">确认</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<div class="col-md-12">
<table class="table">
    <thead>
    <tr>
        <th>ID</th>
        <th>贷款信息</th>
        <th>贷款人</th>
        <th>联系电话</th>
        <th>到期日期</th>
        <th>贷款状态</th>
        <th>跟进状态</th>
        <th>跟进人</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>{{ ra.flow_id }}</td>
        <td>{{ ra.pledge_type }}</td>
        <td>{{ ra.name }}</td>
        <td>{{ ra.phone }}</td>
        <td>{{ ra.deadline }}</td>
        <td>{{ ra.loan_status }}</td>
        <td>{{ ra.flow_status }}</td>
        <td>{{ ra.track_number }}</td>
    </tr>
    </tbody>
</table>
</div>
<div class="col-md-12">
    <div style="background-color:#F2F2F2;height:40px;line-height:40px;font-size:20px;">贷款信息</div>
    <div>
        <div class="row">
            <div style="margin-top:10px;">
                    <div class="col-md-1 saw-info-head"><center>贷款人</center></div>
                    <div class="col-md-3 saw-info-content">{{ ra.name }}</div>
            </div>
        </div>
        <div class="row">
            <div style="margin-top:10px;">
                    <div class="col-md-1 saw-info-head"><center>申请电话</center></div>
                    <div class="col-md-3 saw-info-content">{{ ra.phone }}</div>
            </div>
        </div>
        <div class="row">
            <div style="margin-top:10px;">
                    <div class="col-md-1 saw-info-head"><center>地区</center></div>
                    <div class="col-md-3 saw-info-content">{{ ra.area }}</div>
            </div>
        </div>
        <div class="row">
            <div style="margin-top:10px;">
                    <div class="col-md-1 saw-info-head"><center>申请备注</center></div>
                    <div class="col-md-3 saw-info-content">{{  ra.mark }}</div>
            </div>
        </div>
        <div class="row">
            <div style="margin-top:10px;">
                    <div class="col-md-1 saw-info-head"><center>类型</center></div>
                    <div class="col-md-3 saw-info-content">{{  ra.pledge_type }}</div>
            </div>
        </div>
    </div>
</div>

<div class="col-md-12">
    <div style="background-color:#F2F2F2;height:40px;line-height:40px;font-size:20px;margin-top: 20px;">
        跟进记录
        {% if ra.pay_off_term != '0' and ra.loan_status != '已还清' %}
        <div style="float: right;">
            <button type="button" id="AddRecordButton" class="btn btn-info">添加记录</button>
            <button type="button" id="PayOffButton" class="btn btn-success">全部还清</button>
        </div>
        {% endif %}
    </div>
    
    
    {% for i in l %}
    {% set term = l.index(i) + 1 %}
    {#{% set term = len(l) %}#}
    {% set last = len(l) %}
    

        <div>
            <div class="track-period" data-toggle="collapse" data-target="#collapseContent{{ term }}" aria-expanded="true" aria-controls="collapseExample">第{{ term }}期</div>
                {% if term == last %}
                <div class="collapse in" id="collapseContent{{ term }}" aria-expanded="true">
                {% else %}
                <div class="collapse" id="collapseContent{{ term }}" aria-expanded="false" style="height: 0px;">
                {% endif %}
                {% if i %}
                    {% for rlt in i%}

                        跟进时间：{{ rlt.timestamp }} 跟进人：{{ rlt.track_name }}
                        <p>跟进内容: {{ rlt.content }}</p>
                    {% endfor %}
                {% else %}
                暂无跟进记录
                {% endif %}
                </div>
        </div>
        
    {% set term = term - 1 %}
    {% endfor%}
</div>


{% endblock %}
{% block scripts  %}
{{ super() }}
<script>
    var ajaxPost = function (url, method, form, success, error) {
        var request = {
            url: url,
            type: method,
            contentType: 'application/json',
            success: function (r) {
                success(r);
            },
            error: function (err) {
                r = {
                    success: false,
                    data: err
                };
                error(r);
            }
        };
        if (method === 'post') {
            var data = JSON.stringify(form);
            request.data = data;
        }
        $.ajax(request);
    };
    var success = function (r) {
        alert(r.message);
    };
    var error = function (err) {
            
    };  

    $("#AddRecordButton").on('click', function () {
        $("#AddRecordModal").modal();
    });
    $("#PayOffButton").on('click', function () {
        $("#PayOffModal").modal();
    });
    $("#id-button-comfirm").on('click', function () {
        location.reload();
    });

    $("#pay_off_submit").on('click', function () {
        var track_number = document.getElementById("track_number").value;
        var track_name = document.getElementById("track_name").value;
        var flow_id = document.getElementById("flow_id").value;
        var xfrs = document.getElementById("xfrs").value;
        var form = {
            track_number:track_number,
            track_name:track_name,
            flow_id:flow_id,
            xfrs:xfrs
        };

        var url = '/risk/loan_track/pay_off';
        var method = 'post';
        console.log('pay off form', form);
        var success = function (r) {
            var div = document.getElementById('msg');
            div.innerHTML = r.message;
            $("#PayOffModal").modal('hide');
            $('#MsgModal').modal();
        };
        ajaxPost(url, method, form, success, error);
    })

</script>
<script>
    nav = document.getElementById("nav_loan_track");
    nav.setAttribute("class", "active");
</script>
{% endblock %}
